import React, { memo, useState, useEffect, useRef, useCallback } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { Route, Link, useHistory } from "react-router-dom";
import { Avatar, Button } from "antd";
import { UserOutlined } from "@ant-design/icons";
import AppFooter from "@/components/app-footer";
import { UserWrapper } from "./style";
import Tabcontrol from "./child/tabcontrol";
import { renderRoutes } from "react-router-config";
import storage from "@/utils/storage";
import Sign from "@/views/index/child/sign";
import RightLink from "@/views/index/child/right-link";
import Bulletin from '@/views/index/child/bulletin'
export default memo(function User(props) {
  const { route } = props;

  const history = useHistory();

  let { userDetail } = useSelector(
    (state) => ({
      userDetail: state.getIn(["public", "userDetail"]),
    }),
    shallowEqual
  );

  // console.log(userDetail);
  useEffect(() => {
    document.title = "一片月-个人中心";

    const token = storage.get("token");

    if (!token && typeof token != "undefined" && token != 0) {
      history.push("/login");
    }
  });

  useEffect(() => {
    console.log("变化啦");
  }, [props.location]);

  return (
    <UserWrapper>
      <div className="user-wrap">
        <div className="left">
          <div className="top-info">
            <div className="avatar">
              <Avatar size={80} src={userDetail.avatarUrl} />
            </div>
            <div className="other-info">
              <div className="nick">{userDetail.nick}</div>
              <div className="site">
                <div className="email">邮箱: {userDetail.email}</div>
                <div className="edit">
                  <Button>编辑个人资料</Button>
                </div>
              </div>
            </div>
          </div>

          {/* tabs */}

          <Tabcontrol></Tabcontrol>

          {/* 内容展示 */}
          <div className="user-content">{renderRoutes(route.routes)}</div>
        </div>

        <div className="right">
          <Sign></Sign>
          <RightLink></RightLink>
          <Bulletin></Bulletin>
        </div>
      </div>

      <AppFooter></AppFooter>
    </UserWrapper>
  );
});
